<template>
  <div class="contentContainer">
    <div class="content">
      <div class="top">{{title}}</div>
      <div class="listbottom">
        <div class="leftPart">
          <img class="img" src="../../assets/images/zhong.png" />
        </div>
        <div class="rightPart demo-image__placeholde">
          <div class="listItem" v-for="(item,index) in data" :key="index" @click="goParticulars(item.product_id)">
            <el-image
              style="width: 160px; height: 160px"
              :src="item.product_picture"
            ></el-image>
            <a href="##" class="middle">
              <p class="name">{{item.product_name}}</p>
              <p class="introduce">{{item.product_title}}</p>
              <span>
                <i class="newPrice">{{item.product_selling_price}}元</i>
                <i class="oldPrice">{{item.product_price}}元</i>
              </span>
            </a>
          </div>
          <div class="listItem last">
            <a>浏览更多 》</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "list",
  props:["data","title"],
  methods:{
    // 点击每一个商品,query带参跳转到详情页
    goParticulars(id){
      this.$router.push({
        name:'details',
        query: {id}
      })
    }
  }
};
</script>

<style scoped lang="less">
.contentContainer {
  width: 100%;
  background-color: #f5f5f5;
//   height: 615px;
//   margin-bottom: 50px;
  .content {
    width: 1225px;
    margin: 0 auto;
    // float: left;
    .top {
        width: 100%;
      height: 58px;
      padding-top: 20px;
      font-size: 22px;
      color: #333;
    }
    .listbottom {
      height: 615px;
      width: 1225px;

      .leftPart {
        img {
          width: 234px;
        }

        float: left;
      }
      .rightPart {
        height: 615px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .listItem {
          width: 234px;
          height: 300px;
          background-color: #fff;
          text-align: center;
          margin-left: 10px;
          transition: 1s;
          .middle {
            color: #333;
            height: 40px;
            line-height: 40px;
            text-align: center;
            .name {
              font-size: 14px;
            }
            .introduce {
              margin-top: -18px;
              font-size: 12px;
              color: #b0b0b0;
              margin-bottom: -10px;
            }
            span {
              .newPrice {
                color: #ff6700;
                font-size: 16px;
                margin-right: 10px;
              }
              .oldPrice {
                font-size: 16px;
                color: #d0d0d0;
                text-decoration: line-through;
              }
            }
          }

          a:hover {
            color: #333 !important;
          }
        }
        .last {
          a {
            height: 300px;
            line-height: 300px;
            display: inline-block;
            font-size: 18px;
            color: #333;
            text-align: center;
          }
        }
        .listItem:hover {
          transform: translateY(-10px);
          transition: 1s;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}
/* .top{
    width: 100%;
    
} */
/* .listbottom{
    width: 100%;
    height: 615px;
}
.left{
    width: 234px;
    height: 615px;
    float: left;
}
.img{
    width: 100%;
    height: 100%;
}
.right{
    width: 991px;
    height: 100%;
    float: right;
    display: flex;
    flex-wrap: wrap;
}
.listItem{
    width:234px ;
    height: 257.2px;
    float: left;
    background-color:#FFF;
    margin: 0 0 14.5px 13.7px;
    padding: 10px 0;
     transition:1s;
    
}
.listItem:hover{
    transform: translateY(-10px);
    transition:1s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.listItem img{
    width: 160px;
    height: 160px;
    margin: 0 37px;
}
.listItem h2{
    width: 214px;
    height: 18.4px;
    font-size: 14px;
    color: #333;
    margin: 25px 10px 0;
    text-align: center;
}
.listItem h3{
    width: 214px;
    height: 18px;
    font-size: 12px;
    color: #B0B0B0;
    margin: 5px 10px;
     text-align: center;
}
.listItem p{
    width: 214px;
    height: 20px;
    margin: 10px;
    text-align: center;
    margin-bottom: 20px;
}
.listItem p span{
    font-size: 16px;
    color: #FF6700;
}
.last{
    font-size:18px;
    text-align: center;
    line-height: 257.2px;
} */
</style>